<template>
    <div class="text-back">
        <div class="text-back-top">
            <div class="tbt-conntent">这是顶部标题</div>
        </div>
    </div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
$bg: 'https://pic2.zhimg.com/v2-8a44ad8dbfb4aed377223a10adab67e1_r.jpg';
.text-back {
    background-image: url($bg);
    background-size: cover;
    .text-back-top {
        position: relative;
        background-color: rgba(10, 10, 10, 0.5);
        .tbt-conntent {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 600px;
            font-size: 200px;
            font-weight: 600;
            -webkit-text-stroke: 1px rgba(255, 255, 255, .5);
            background-image: url($bg); /* 替换为你的图片路径 */
            background-size: cover;
            background-repeat: no-repeat;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            user-select: none;
        }
    }
}
</style>
